<template>
  <view class="content">
    <text class="title">产品API示例</text>
    
    <view class="section">
      <text class="section-title">产品列表</text>
      <button @click="fetchProductList" class="btn">获取产品列表</button>
      <button @click="clearProductList" class="btn secondary">清空列表</button>
      
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <view v-else class="product-list">
        <view 
          v-for="product in productList" 
          :key="product.id" 
          class="product-item"
          @click="fetchProductDetail(product.id)"
        >
          <text class="product-title">{{ product.title }}</text>
          <text class="product-price">价格: ${{ product.price }}</text>
        </view>
      </view>
    </view>
    
    <view class="section" v-if="productDetail.id">
      <text class="section-title">产品详情</text>
      <view class="product-detail">
        <text>名称: {{ productDetail.title }}</text>
        <text>价格: ${{ productDetail.price }}</text>
        <text>描述: {{ productDetail.description }}</text>
        <text>分类: {{ productDetail.category }}</text>
      </view>
      <button @click="clearProductDetail" class="btn secondary">清空详情</button>
    </view>
    
    <view class="section">
      <text class="section-title">创建产品</text>
      <input v-model="newProduct.title" placeholder="产品名称" class="input" />
      <input v-model="newProduct.price" placeholder="价格" class="input" type="number" />
      <input v-model="newProduct.description" placeholder="描述" class="input" />
      <button @click="createProduct" class="btn">创建产品</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import productApi from '../../api/product.js'

// 响应式数据
const productList = ref([])
const productDetail = ref({})
const loading = ref(false)
const newProduct = reactive({
  title: '',
  price: '',
  description: ''
})

// 获取产品列表
const fetchProductList = async () => {
  loading.value = true
  const res = await productApi.getProductList({ limit: 5 })
  productList.value = res
  loading.value = false
}

// 清空产品列表
const clearProductList = () => {
  productList.value = []
}

// 获取产品详情
const fetchProductDetail = async (id) => {
  const res = await productApi.getProductById(id)
  productDetail.value = res
}

// 清空产品详情
const clearProductDetail = () => {
  productDetail.value = {}
}

// 创建产品
const createProduct = async () => {
  if (!newProduct.title || !newProduct.price) {
    uni.showToast({
      title: '请填写必要信息',
      icon: 'none'
    })
    return
  }

  const res = await productApi.createProduct({
    title: newProduct.title,
    price: parseFloat(newProduct.price),
    description: newProduct.description,
    category: '默认分类',
    image: 'https://placehold.co/150'
  })

  // 将新产品添加到列表中
  productList.value.unshift(res)

  // 清空表单
  newProduct.title = ''
  newProduct.price = ''
  newProduct.description = ''
}
</script>

<style>
.content {
  padding: 40rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  display: block;
}

.section {
  margin-bottom: 60rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.input {
  border: 1rpx solid #ccc;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.btn {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 20rpx;
  margin: 20rpx 0;
  border-radius: 10rpx;
  width: 100%;
}

.btn.secondary {
  background-color: #8e8e93;
}

.loading {
  text-align: center;
  padding: 40rpx 0;
}

.product-list {
  margin-top: 20rpx;
}

.product-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  background-color: #f8f8f8;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.product-item:last-child {
  border-bottom: none;
}

.product-title {
  font-weight: bold;
  font-size: 30rpx;
}

.product-price {
  color: #666;
  font-size: 26rpx;
  margin: 10rpx 0;
  display: block;
}

.product-detail {
  background-color: #f8f8f8;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.product-detail text {
  display: block;
  margin: 10rpx 0;
  font-size: 28rpx;
}
</style>